<template>
  <div class="diamond-wrap">
    <div
      class="diamond-item"
      v-for="(diamond, index) in diamondList"
      :key="diamond.id"
      @click="handleDiamondClick(diamond, index)"
    >
      <img alt="" :src="http2httpsLocal(diamond.imgUrl)" />
      <span class="title">{{ diamond.name }}</span>
    </div>
  </div>
</template>

<script>
import { goLink, http2https } from '@/utils/util';

export default {
  name: 'diamondList',
  props: {
    diamondList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    http2httpsLocal(url) {
      return http2https(url);
    },
    handleDiamondClick(diamond) {
      const { name, linkUrl, activityId } = diamond || {};
      let { hrefType } = diamond || {};
      hrefType = hrefType || 0;
      if (!linkUrl) {
        return;
      }
      switch (hrefType) {
        case 0: // 落地页
          goLink(linkUrl, (params, path) => {
            this.$router
              .push({
                path,
                query: {
                  ...params,
                  shopId: this.$route.query.shopId
                }
              })
              .catch(err => {
                console.log(err);
              });
          });
          break;
        case 1: // 图片类型
          this.$router.push({
            path: 'banner-image',
            query: {
              name,
              imgUrl: linkUrl
            }
          });
          break;
        case 2: // 活动类型
          this.$router.push({
            path: 'brand',
            query: {
              activityNo: linkUrl
            }
          });
          break;
        case 3: // 商品类型
          this.$router.push({
            path: 'productDetail',
            query: {
              productId: linkUrl,
              shopId: this.$route.query.shopId,
              activityNo: activityId
            }
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.diamond-wrap {
  width: 355px;
  background: #fff;
  border-radius: 6px;
  margin: 0 auto 10px;
  padding: 2px 2px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .diamond-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    margin: 10px 0;

    img {
      width: 54px;
      height: 54px;
      object-fit: cover;
      margin-bottom: 3px;
      display: inline-block;
    }

    .title {
      font-size: 12px;
      color: #333333;
      font-family: PingFangSC-Regular;
      line-height: 17px;
      text-align: center;
    }
  }
}
</style>
